<div class="row">
    <div class="col">
        <div class="bd-callout bd-callout-info">
            <h5>Client Software</h5>
            <p>There are a number of open-source client libraries that you can put on your devices in various languages. If you would like to use the one from this project, you can download the latest version below.
                Once downloaded you can run the example and communicate with a gateway using the CLI which I have built in as the default runtime.
                If you would like to use this client as a library in production
                then please refer to the client documentation.
            </p>

            <div class="col-12">
                <p>
                    <a href="https://github.com/simon622/mqtt-sn/releases/tag/0.2.0-alpha">Download Java Client CLI</a>
                </p>
                <p>
                    You can then issue the following command:
                    <code>java -jar mqtt-sn-client-VERSION.jar</code> and follow the prompts.
                </p>
            </div>


        </div>
    </div>
</div>

<div class="row">
    <div class="col">
        <div class="bd-callout bd-callout-info">
            <h5>Client Access & Security</h5>
            <p>You can run your gateway using a defined set of allowed Client Identifiers (and their respective identifiers to put in a CONNECT message), or you can operate the
                gateway allowing access from any Client Identifier that may choose to connect. This access is controlled below. In order to specify a defined set of allowed Client Identifier's, enable <code>'Access Control'</code> below.
            </p>

            <div class="col-12">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="" id="enableWhitelist" onclick="whitelist()">
                    <label class="form-check-label" for="enableWhitelist">
                        Access Control List Enabled ? <code>(when not enabled, the gateway will ALLOW all connections)</code>.
                    </label>
                </div>
            </div>

        </div>
    </div>
</div>


<div class="row whitelisted">
    <div class="col">
        <div class="bd-callout bd-callout-info">
            <h5>Access List</h5>
            <p>
                This is a whitelist of allowed clientIds on the platform. <a href="#" data-bs-toggle="modal" data-bs-target="#newClientId">Add a new Client Identifier</a>.
            </p>

            <table class="table table-striped">
                <thead>
                <tr>
                    <th scope="col">Client Id</th>
                    <th scope="col">CONNECT Token</th>
                    <th scope="col"></th>
                </tr>
                </thead>
                <tbody id="allowedClientIds">
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="row whitelisted">
    <div class="col">
        <div class="bd-callout bd-callout-info">
            <h5>Access Credentials (Version 2.0 +)</h5>
            <p>
                Defines a list of allowed Credential Pairs that can be used to authenticate with the gateway.
                <a href="#" data-bs-toggle="modal" data-bs-target="#newCreds">Add a new Credentials Pair</a>.
            </p>
            <table class="table table-striped">
                <thead>
                <tr>
                    <th scope="col">Username</th>
                    <th scope="col">Password</th>
                    <th scope="col"></th>
                </tr>
                </thead>
                <tbody id="credentials">
                </tbody>
            </table>
        </div>
    </div>
</div>


<div class="modal" tabindex="-1" id="newClientId">
    <form id="newClientIdForm" class="clientid-needs-validation" novalidate>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">New Client Id</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="clientId" class="form-label">Client Id</label>
                    <input type="text" class="form-control" id="clientId" aria-describedby="clientIdHelp" required>
                    <div id="clientIdHelp" class="form-text">The Client Identifier should be between 1-23 ASCII characters long.</div>
                    <div class="invalid-feedback">
                        Please provide a valid Client Identifier.
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="button" class="btn btn-sm btn-success formbtn">Add Client Identifier</button>
            </div>
        </div>
    </div>
    </form>
</div>

<div class="modal" tabindex="-1" id="newCreds">
    <form id="newCredsForm" class="creds-needs-validation" novalidate>
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">New Credentials</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="mb-3">
                        <label for="username" class="form-label">Username</label>
                        <input type="text" class="form-control" id="username" aria-describedby="usernameHelp" required>
                        <div id="usernameHelp" class="form-text">The Username should be between 1-255 ASCII characters long.</div>
                        <div class="invalid-feedback">
                            Please provide a valid Username.
                        </div>
                    </div>
                    <div class="mb-3">
                        <label for="password" class="form-label">Password</label>
                        <input type="password" class="form-control" id="password" aria-describedby="passwordHelp" required>
                        <div id="passwordHelp" class="form-text">The Password should be between 1-255 ASCII characters long.</div>
                        <div class="invalid-feedback">
                            Please provide a valid Password.
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-sm btn-success credsformbtn">Add Credentials</button>
                </div>
            </div>
        </div>
    </form>
</div>

<script>

    (() => {
        'use strict';
        //client id
        const form = document.querySelector('.clientid-needs-validation');
        const btn = document.querySelector('.formbtn');

        btn.addEventListener('click', () => {
            // Creating the event
            const event = new Event('submit', {
                'bubbles': true,
                'cancelable': true
            });

            form.dispatchEvent( event );
        })

        form.addEventListener('submit', (event) => {
            if (!form.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            } else {
                var formData = {
                    name: $("#clientId").val()
                };
                $.ajax({
                    type: "POST",
                    url: "/console/client/access?type=clientId",
                    data: JSON.stringify(formData),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    encode: false,
                }).
                done(function (data) {
                    renderMessage(data);
                    update();
                });

                $("#clientId").val('');
                var myModalEl = document.getElementById('newClientId');
                var modal = bootstrap.Modal.getInstance(myModalEl)
                modal.hide();
            }
            form.classList.add('was-validated');

        }, false);


        //creds
        const credsform = document.querySelector('.creds-needs-validation');
        const credbtn = document.querySelector('.credsformbtn');

        credbtn.addEventListener('click', () => {
            // Creating the event
            const event = new Event('submit', {
                'bubbles': true,
                'cancelable': true
            });

            credsform.dispatchEvent( event );
        })

        credsform.addEventListener('submit', (event) => {
            if (!credsform.checkValidity()) {
                event.preventDefault();
                event.stopPropagation();
            } else {
                var formData = {
                    username: $("#username").val(),
                    password: $("#password").val()
                };
                $.ajax({
                    type: "POST",
                    url: "/console/client/access?type=creds",
                    data: JSON.stringify(formData),
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    encode: false,
                }).
                done(function (data) {
                    renderMessage(data);
                    update();
                });

                $("#username").val('');
                $("#password").val('');
                var myModalEl = document.getElementById('newCreds');
                var modal = bootstrap.Modal.getInstance(myModalEl)
                modal.hide();
            }
            credsform.classList.add('was-validated');

        }, false);


    })();


    function whitelist(){
        var whiteListCheckbox = document.getElementById('enableWhitelist');
        $.ajax({
            type: "GET",
            url: "/console/client/access?enableWhitelist=" + whiteListCheckbox.checked,
            encode: true,
        }).
        done(function (data) {
            if(data.hasOwnProperty("msg")){
                renderMessage(data);
            }
            update();
        });
    }

    function removeClient(clientId){
        $.ajax({
            type: "GET",
            url: "/console/client/access?removeClientId=" + encodeURIComponent(clientId),
            encode: true,
        }).
        done(function (data) {
            renderMessage(data);
            update();
        });
    }

    function removeCreds(username){
        $.ajax({
            type: "GET",
            url: "/console/client/access?removeCreds=" + encodeURIComponent(username),
            encode: true,
        }).
        done(function (data) {
            renderMessage(data);
            update();
        });
    }

    function update(){
        $.getJSON("/console/client/access", function(data) {
            var whiteListCheckbox = document.getElementById('enableWhitelist');
            whiteListCheckbox.checked = ! data.allowAllClientIds;
            var root = document.getElementById('allowedClientIds');
            // var els = document.getElementsByClassName("whitelisted");
            if(whiteListCheckbox.checked) {
                $('.whitelisted').show();
            } else {
                $('.whitelisted').hide();
            }
            removeChildren(root);
            data['allowedClientIds'].forEach(element => root.insertAdjacentHTML('afterbegin', `<tr><td>${element.clientId}</td><td>${element.token}</td><td><a href="#" onclick="removeClient('${element.clientId}');">remove</a></td></tr>`));
            var root = document.getElementById('credentials');
            removeChildren(root);
            data['credentials'].forEach(element => root.insertAdjacentHTML('afterbegin', `<tr><td>${element.username}</td><td>${element.password}</td><td><a href="#" onclick="removeCreds('${element.username}');">remove</a></td></tr>`));
        })



    }
    update();
    // pageTimer(updateTime, function (){
    //     update();
    // })
</script>